<template>
  <div class="subchild">
    <twoHead title='登录'>
      <span @click="onReg">立即注册</span>
    </twoHead>

    <van-tabs v-model="active" color="#ff5f16" animated sticky>
      <van-tab title="密码登录" name="1">
        <van-form @submit="onSubmit" class="">
          <van-field
            v-model="login.phone"
            name="phone"
            label="手机号码"
            placeholder="请填写手机号码"
            :rules="[
              { required: true, message: '请填写手机号码' },
              { pattern: phoneReg, message: '请填写正确的手机号码' },
            ]"
          />
          <van-field
            v-model="login.password"
            name="password"
            label="密码"
            placeholder="密码"
            :type="type_1"
            :right-icon="type_1 == 'password' ? 'closed-eye' : 'eye-o'"
            @click-right-icon="
              type_1 == 'password' ? (type_1 = 'text') : (type_1 = 'password')
            "
            :rules="[
              { required: true, message: '请填写密码' },
              { pattern: passReg, message: '请填写正确的密码' },
            ]"
          />
          <div style="margin: 16px">
            <van-button block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </van-tab>

      <van-tab title="手机号登录" name="2">
        <van-form @submit="onSubmit2" class="">
          <van-field
            v-model="obj.phone"
            name="phone"
            label="手机号码"
            placeholder="请填写手机号码"
            :rules="[
              { required: true, message: '请填写手机号码' },
              { pattern: phoneReg, message: '请填写正确的手机号码' },
            ]"
          />
          <van-field
            v-model="obj.sms"
            center
            name="captcha"
            label="短信验证码"
            placeholder="请输入短信验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <van-button
                size="small"
                type="primary"
                @click="onCaptcha"
                style="width: 90px"
                v-if="flag"
                >{{ txt }}</van-button
              >
              <van-button
                disabled
                size="small"
                type="primary"
                @click="onCaptcha"
                style="width: 90px"
                v-else
                >{{ txt }}</van-button
              >
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button block type="primary" native-type="submit"
              >登录</van-button
            >
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
  </div>
</template>



<script>
import { phoneReg, passReg } from "@/utils";
import { Notify } from "vant";
import { mapState,mapMutations } from "vuex";

export default {
  data() {
    return {
      login: {},
      active: 1,
      obj: {},
      type_1: "password",
      phoneReg,
      passReg,
      count: 10,
      txt: "发送验证码",
      timer: null,
      flag: true,
    };
  },
  methods: {
    ...mapMutations(['setFootPlayer']),
    countDown() {
      if (this.count > 0) {
        this.count--;
        this.txt = this.count + "S";
        this.flag = false;
      } else {
        clearInterval(this.timer);
        this.timer = null;
        this.count = 10;
        this.txt = "发送验证码";
        this.flag = true;
      }
    },
    onSubmit(values) {
      console.log(values);
      this.$ajax.getLogin(values, {}).then((res) => {
        if (res.code) {
          Notify({ type: "success", message: res.msg });
          localStorage.setItem("phone", this.login.phone);
          localStorage.setItem("token", res.token);
          this.$router.push({ name: "find" });
        } else {
          Notify({ type: "danger", message: res.msg });
        }
      });
    },
    onReg() {
      this.$router.push({ name: "register" });
    },

    onCaptcha(values) {
      if (this.phoneReg.test(this.obj.phone)) {
        this.$ajax.checkPhone({ phone: this.obj.phone }).then((result) => {
          if (result.code) {
            this.timer = setInterval(this.countDown, 1000);
            this.$ajax
              .getCaptcha({ phone: this.obj.phone }, {})
              .then((res) => {});
          } else {
            Notify({ type: "danger", message: result.msg });
            this.$router.push({ name: "register" });
          }
        });
      }
    },
    onSubmit2(values) {
      this.$ajax
        .getVerify(values, {})
        .then((res) => {
          if (res.code == 200) {
            Notify({ type: "success", message: "登录成功" });
            localStorage.setItem("phone", this.obj.phone);
            localStorage.setItem("token", res.token);
            this.$router.push({
              name: "find",
            });
          } else {
            Notify({ type: "danger", message: "验证码错误" });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.setFootPlayer(false);
    let phone = localStorage.getItem("phone");
    phone = this.$route.query.phone ? this.$route.query.phone : phone;
    this.login = { ...this.login, phone };
    this.obj = { ...this.obj, phone };
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-tab--active {
  // 样式穿透   因为加了 scoped 不穿透无法改变样式
  .van-tab__text {
    color: #ff5f16;
  }
}
.subchild{
    background: #fff;
    height: 100vh;
    padding-top: 46px;
}
</style>